<!--  -->
<template>
  <div id="fu">
    <div class="fu">fu</div>
    <Zizhujian :text="msg" @zichuanfu="num" ref="zizhujian"/>
    <br/>
    <br/>
    <span>子传值给父:{{shuzi}}</span>
    <br/>
    <br/>
    <button @click="fucfz">父触发子</button>
    <br/>
    <br/>
    <p>子直接调用父的方法:{{fudata}}</p>
  </div>
</template>

<script>
import Zizhujian from './children/zizhujian'
export default {
  data () {
    return {
      msg:'父传子',
      shuzi:1,
      fudata:1,
    };
  },
  components: {
    Zizhujian
  },
  computed: {},
  mounted(){},
  methods: {
    num(i){
        this.shuzi = this.shuzi+i;
    },
    fucfz(){
      this.$refs.zizhujian.fuGetzhi();
    },
    fuFunction(){
      this.fudata = ++this.fudata;
    }
  }
}

</script>
<style lang='scss' scoped>
  $px:200px;
  #fu{
    color: #fff;
    background-color: red;
  }
  .fu{
    width: $px;
    height: $px;
    color: #fff;
    background-color: #333;
  }
</style>